<template>
  <div class="wh_container">
    <div class="wh_content_all">
      <div class="wh_top_changge">
        <li class="wh_content_li">{{dateTop}}</li>
      </div>
      <div class="wh_content cal-top">
        <div class="wh_content_item" v-for="tag in textTop">
          <div class="wh_top_tag">{{tag}}</div>
        </div>
      </div>
      <div class="wh_content">
        <div class="wh_content_item" :class="{wh_want_dayhide_parent:item.dayHide}" v-for="(item,index) in list" @click="clickDay(item,index)">
          <div
            class="wh_item_date"
            :class="[{wh_other_dayhide:item.otherMonth!=='nowMonth'}, {wh_want_dayhide:item.dayHide}, {wh_chose_day:item.chooseDay}]">
            {{item.id}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import timeUtil from "./calendar";
export default {
  name : 'calendar',
  props: {
    markDateList: {
      type: Array,
      default: () => ['']
    },

    textTop: {
      type: Array,
      default: () => ["一", "二", "三", "四", "五", "六", "日"]
    },
    sundayStart: {
      type: Boolean,
      default: () => false
    },
    agoDayHide: {
      type: String,
      default: `0`
    },
    futureDayHide: {
      type: String,
      default: `2554387200`
    },
    myDate : {
      type : Date,
      default : () => new Date()
    },
    readOnly : {
      type : Boolean,
      default: () => false
    }
  },

  data() {
    return {
      // myDate: [],
      list: [],
      dateTop: ""
    };
  },

  created() {
    this.intStart();
    // this.myDate = new Date();
  },
  methods: {
    intStart() {
      timeUtil.sundayStart = this.sundayStart;
    },
    // setClass(data) {
    //   let obj = {};
    //   obj[data.markClassName] = data.markClassName;
    //   return obj;
    // },
    clickDay: function(item, index) {
      if (this.readOnly) {
        return;
      }
      if (item.dayHide) {
        this.$alert("超出时间范围", "提示", {type : "warning"})
        return;
      }
      if (item.otherMonth !== "nowMonth") {
        this.$alert("只能操作当月日期", "提示", {type : "warning"})
        return;
      }
      if (item.otherMonth === "nowMonth" && !item.dayHide) {
        item.chooseDay = !item.chooseDay;
      }
    },

 /*   ChoseMonth: function(date, isChosedDay = true) {
      date = timeUtil.dateFormat(date);
      this.myDate = new Date(date);
      this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
      if (isChosedDay) {
        this.getList(this.myDate, date, isChosedDay);
      } else {
        this.getList(this.myDate);
      }
    },
    PreMonth: function(date, isChosedDay = true) {
      date = timeUtil.dateFormat(date);
      this.myDate = timeUtil.getOtherMonth(this.myDate, "preMonth");
      this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
      if (isChosedDay) {
        this.getList(this.myDate, date, isChosedDay);
      } else {
        this.getList(this.myDate);
      }
    },
    NextMonth: function(date, isChosedDay = true) {
      date = timeUtil.dateFormat(date);
      this.myDate = timeUtil.getOtherMonth(this.myDate, "nextMonth");
      this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
      if (isChosedDay) {
        this.getList(this.myDate, date, isChosedDay);
      } else {
        this.getList(this.myDate);
      }
    },*/
    fetchChosenDay : function() {
      let dayList = [];
      for (let item of this.list) {
        if (item.otherMonth === "nowMonth" && item.chooseDay) {
          dayList.push(item);
        }
      }
      return dayList;
    },
    initTag(markDateList) {
      let arr = this.list;
      for (let i = 0; i < arr.length; i++) {
        let k = arr[i];
        const nowTime = k.date;
        const t = new Date(nowTime).getTime();

        //无法选中某天
        k.dayHide = t < this.agoDayHide || t > this.futureDayHide;

        if (k.otherMonth !== 'nowMonth') {
          continue;
        }
        k.chooseDay = markDateList.indexOf(k.date) !== -1;
      }
    },
    initList() {
      this.getList(this.myDate);
    },
    initShow: function(markDateList) {
      this.getList(this.myDate);
      this.initTag(markDateList)
    },
    getList: function(date) {
      // debugger
      this.dateTop = `${date.getFullYear()} 年 ${date.getMonth() + 1} 月`;
      let arr = timeUtil.getMonthList(this.myDate);
      this.list = arr;
    }
  },
  mounted() {
    this.initShow(this.markDateList);
  },
  /*watch: {
    markDate: {
      handler(val, oldVal) {
        this.getList(this.myDate);
      },
      deep: true
    },
    markDateMore: {
      handler(val, oldVal) {
        this.getList(this.myDate);
      },
      deep: true
    },
    agoDayHide: {
      handler(val, oldVal) {
        this.getList(this.myDate);
      },
      deep: true
    },
    futureDayHide: {
      handler(val, oldVal) {
        this.getList(this.myDate);
      },
      deep: true
    },
    sundayStart: {
      handler(val, oldVal) {
        this.intStart();
        this.getList(this.myDate);
      },
      deep: true
    }
  }*/
};
</script>
<style scoped lang="scss">
  @import "../../styles/element-ui-variables";
  /*@media screen and (min-width: 460px) {*/
  /*  .wh_item_date:hover {*/
  /*    background: #71c7a5;*/
  /*    cursor: pointer;*/
  /*  }*/
  /*}*/
    .wh_item_date:hover {
      color: $--color-primary;
      cursor: pointer;
    }
  * {
    margin: 0;
    padding: 0;
  }

  .wh_container {
    max-width: 280px;
    margin: auto;
  }

  li {
    list-style-type: none;
  }
  .wh_top_changge {
    display: flex;
  }

  .wh_top_changge li {
    cursor: pointer;
    display: flex;
    color: #666;
    font-size: 18px;
    flex: 1;
    justify-content: center;
    align-items: center;
    height: 47px;
  }

  .wh_top_changge .wh_content_li {
    cursor: auto;
    flex: 2.5;
  }
  .wh_content_all {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
    background-color: #fff;
    width: 100%;
    overflow: hidden;
    /*padding-bottom: 8px;*/
  }

  .wh_content {
    display: flex;
    flex-wrap: wrap;
    padding: 0 1% 0 1%;
    width: 100%;

  }

  .cal-top{
    border-bottom: 1px solid #D2D6DE;
    margin-bottom: 10px;
  }

  .wh_content:first-child .wh_content_item_tag,
  .wh_content:first-child .wh_content_item {
    color: #ddd;
    font-size: 16px;
  }

  .wh_content_item,
  wh_content_item_tag {
    font-size: 14px;
    width: 14.28%;
    text-align: center;
    color: #666;
    position: relative;
  }
  .wh_content_item {
    height: 30px;margin-bottom: 10px;
  }

  .wh_top_tag {
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .wh_item_date {
    width: 26px;
    height: 26px;
    line-height: 26px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .wh_jiantou1 {
    width: 12px;
    height: 12px;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    transform: rotate(-45deg);
  }

  .wh_jiantou1:active,
  .wh_jiantou2:active {
    border-color: #ddd;
  }

  .wh_jiantou2 {
    width: 12px;
    height: 12px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    transform: rotate(45deg);
  }
  .wh_content_item > .wh_isMark {
    margin: auto;
    border-radius: 100px;
    background: blue;
    z-index: 2;
  }
  .wh_content_item .wh_other_dayhide {
    color: #bfbfbf;
    opacity: 0.6;
  }
  .wh_content_item .wh_want_dayhide {
    color: #c0c4cc;
    cursor: not-allowed;
  }
  .wh_want_dayhide_parent{
    background: #f5f7fa;
  }

  .wh_content_item .wh_isToday {
    background: yellow;
    border-radius: 100px;
  }
  .wh_content_item .wh_chose_day {
    background: $--color-danger;
    border-radius: 13px;
    color: #fff;
  }
</style>
